<div>

    <!-- 顶部导航框 -->
    <div class="header" id="headerNav">
        <div class="container">
            <div class="head-left wow fadeInLeft animated animated" data-wow-delay=".3s"
                 style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInLeft;">
                <div class="header-search">
                    <div class="search">
                        <input class="search_box" type="checkbox" id="search_box">
                        <label class="icon-search" for="search_box">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </label>
                        <div class="search_form">
                            <form action="#" method="post">
                                <input type="text" name="keywords" placeholder="search what you want ...">
                                <input type="submit" name="searchBtn" value="Send">
                            </form>
                        </div>
                    </div>
                </div><!--搜索条结束-->
            </div>
            <div class="header_right wow fadeInLeft animated animated" data-wow-delay=".5s"
                 style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInLeft;">
                <nav class="navbar navbar-default">
                    <!-- Brand and togadminGet get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse nav-wil" name="headerNav0" >
                        <nav class="link-effect-7" >
                            <ul class="nav navbar-nav">
                                <li><a href="/static/main/index.html">首页</a></li>
                                <li><a href="/static/main/blogList.html">所有博客</a></li>
                                <li><a href="#">技术探讨</a></li>
                                <li><a href="#">实验基地</a></li>
                                <li><a href="#">资源导航</a></li>
                                <li><a href="/static/main/moods.html">点点滴滴</a></li>
                                <li><a href="/static/main/advices.html?id=-2">给我留言</a></li>
                                <li><a href="/static/main/blogDetail.html?id=-3">关于博主</a></li>
                            </ul>
                        </nav>
                    </div>
                </nav>
            </div>
            <div class="nav navbar-nav navbar-right social-icons wow fadeInRight animated animated" data-wow-delay=".5s"
                 style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInRight;">
                <div class="heart " name="projHeartEle" >
                    <span class="likeCount" name="projLikeCntEle"> 0 </span>
                </div>

            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <!-- 博客标题部分 -->
    <div class="header-bottom" id="bannerNav">
        <div class="container">
            <div class="logo wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                <h1><a href="/static/main/index.html">HXBlog_V2.0</a></h1>
                <p><label class="of"></label><span>stay hungry, stay foolish</span><label class="on"></label></p>
            </div>
        </div>
    </div>

    <!-- 右侧导航部分 -->
    <div class="col-md-3 technology-right" id="rightNav">
        <div class="blo-top1">
            <div class="tech-btm">
                <div id="time" class="insta ">
                    <canvas id="timeCanvas" style="width: 100%"></canvas>
                </div><!--时间结束-->

                <div class="search-1 wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <form action="#" method="post">
                        <input type="search" name="keywords" required />
                        <input type="submit" name="searchBtn" value="" />
                    </form>
                </div><!--搜索结束-->

                <div class="insta wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <select name="typesEle" class="cd-select cd-dropdown">
                        <option selected>博客类别</option>

                    </select>
                </div><!--博客类别结束-->

                <div class="blog-grids wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s"
                     style="border: none">
                    <h4 style="margin: 0">热门点击</h4>
                </div>
                <div name="hotBlogsEle">

                </div>
                <!--热门点击结束-->

                <div class="insta wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <h4>标签云</h4>
                    <div name="tagCloudEle"></div>
                </div><!--标签云结束-->

                <div class="dateCategory wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                    <h4>日期归档</h4>
                    <nav class="cl-effect-1" name="facetByMonthEle">

                    </nav>

                </div><!--日期归档结束-->

                <div class="insta wow fadeInDown" name="linksEle" data-wow-duration=".8s" data-wow-delay=".2s">
                    <h4>友情链接</h4>

                </div><!--友情链接结束-->
            </div>
        </div>
    </div><!--右侧内容结束-->


    <div id="replyNav">
        <div id="topOfResp"></div>
        <div class="response">
            <h4>
                评论
                <span class="feed" style="float:right">
                    <el-rate
                            name="rateSelect"
                            v-model="senseVal"
                            :disabled="((senseVal != 0) && (! userInfo.systemUser))"
                            :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
                            void-icon-class="icon-rate-face-off"
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                            @change="updateSense"
                    >
                    </el-rate>
                </span>
            </h4>
            <div id="replyForm">
                <a name="inputComment" href="javascript:void(0)"></a>
                <div class="input-group">
                    <div class="input-group-addon">用户名 <span style="color:red">*</span></div>
                    <input name="name" type="text" class="form-control"
                           :value="userInfo.name" v-model="userInfo.name" placeholder="name"/>

                    <div class="input-group-addon">邮箱</div>
                    <input name="email" type="text" class="form-control"
                           :value="userInfo.email" v-model="userInfo.email" placeholder="email"/>
                </div>
                <br/>
                头像选择 :
                <img :src="userInfo.headImgUrl" name="headImgUrl" width="40px" height="40px"/>
                <span v-if="(userInfo.systemUser)">
                    <button type="button" class="btn btn-xs btn-success" @click="reUseMyHeadImg($event)">
                        自己的头像
                    </button>
                </span>
                <br/>
                <select class="form-control" @change="updateHeadImg($event)">
                    <option v-for="headImage in headImages" :id="headImage.id" :value="headImage.url">
                        {{headImage.title}}
                    </option>
                </select>
                <br/>
                <div title="reply" name="comment" class="editor form-control" contenteditable="true"
                     style="overflow-y:auto;overflow-x:hidden;" >
                </div>

                <br/>
                <span style="float:left">
                    <button name="looks" type="button" class="btn btn-default">放图吧</button>
                </span>
                <span style="float:right">
                    <button name="submitBtn" @click="addComment()" class="btn btn-default">提交评论</button>
                </span>
            </div>
        </div>

        <div class="response">
            <span v-for="floor in comments">
                <div class="floor">
                    <!--<hr/>-->
                    <dl class='comment_item comment_topic'>
                    <div name="floorDiv" class="replyDiv comment_reply" >
                        <dt class='comment_head'>
                        <span> {{floor.floorComment.floorId}} 楼</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class='floorInfo'
                              :floorId='floor.floorComment.floorId'
                              :commentId='floor.floorComment.commentId'
                              :name='floor.floorComment.name'
                              :role="floor.floorComment.role">
                        <span name='commenter' class='text-warning'> {{floor.floorComment.name}} </span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span name='role' class='text-error'>[{{floor.floorComment.role}}]</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span name='date' class='text-success'>发表于 {{floor.floorComment.createdAt}} </span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class='comment_manage'>
                        <span class='commentReply'>
                            <a href='javascript:void(0)' class='cmt_btn reply' title='回复'
                               @click="replyFunc($event)">[回复]</a>
                        </span>&nbsp;&nbsp;
                        <a href='javascript:void(0)' class='cmt_btn quote' title='引用'>[引用]</a>&nbsp;&nbsp;
                        <a href='javascript:void(0)' class='cmt_btn report' title='举报'>[举报]</a>&nbsp;&nbsp;
                        </span>
                        </span>
                        </dt>
                        <dd class='comment_userface'>
                        <a href='javascript:void(0)'>
                            <img :src='floor.floorComment.headImgUrl' width='40' height='40'
                                 :title='floor.floorComment.email'/>
                        </a>
                        </dd>
                        <dd class='comment_body'> [@{{floor.floorComment.toUser}}] :
                            <span v-html="floor.floorComment.comment" style="word-break: break-all;" ></span>
                        </dd>
                    </div>

                    <div name="replyDiv" class='replyDiv comment_reply' style="margin-left:100px" v-for="reply in floor.replies">
                        <dl class='comment_item'>
                        <dt class='comment_head'>
                        Re:
                        <span class='floorInfo'
                              :floorId='reply.floorId' :commentId='reply.commentId'
                              :name='reply.name' :role="reply.role">
                        <span name='commenter' class='text-warning'> {{reply.name}} </span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span name='role' class='text-error'>[{{reply.role}}]</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span name='date' class='text-success'>发表于  {{reply.createdAt}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class='comment_manage'>
                        <span class='commentReply'>
                            <a href='javascript:void(0)' class='cmt_btn reply' title='回复'
                               @click="replyFunc($event)">[回复]</a>
                        </span>&nbsp;&nbsp;
                        <a href='javascript:void(0)' class='cmt_btn quote' title='引用'>[引用]</a>&nbsp;&nbsp;
                        <a href='javascript:void(0)' class='cmt_btn report' title='举报'>[举报]</a>&nbsp;&nbsp;
                        </span>
                        </span>
                        </dt>

                        <dd class='comment_userface'>
                        <a href='javascript:void(0)'>
                            <img :src='reply.headImgUrl' width='40' height='40' :title='reply.email'/>
                        </a>
                        </dd>
                        <dd class='comment_body'> [@{{reply.toUser}}] :
                            <span v-html="reply.comment" style="word-break: break-all;" ></span>
                        </dd>
                        </dl>
                    </div>
                    </dl>
                </div>

                <div name="fillingDiv" class="comment_item comment_topic replyDiv comment_reply" :style="'margin-left:' + floor.fillingDivMargin + 'px;'"></div>
            </span>
        </div>

        <nav class="paging wow fadeInDown" data-wow-duration=".5s" data-wow-delay=".2s"
             style="text-align: center" v-if="pagination.length > 3" >
            <ul class="pagination pagination-mg">
                <li v-for="page in pagination" :class="page.active">
                    <a href="javascript:void(0)" @click="updateComment(page.pageUrl)">{{page.pageNo}}</a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 底部导航框 -->
    <div class="footer" id="footerNav">
        <div class="container">
            <div class="col-md-4 footer-left wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                <h4>关于本站</h4>
                <p name="siteTime"></p>
                <p>今日访问量: <span name="todayVisitedEle"> </span></p>
                <p>网站总访问量: <span name="totalVisitedEle"> </span></p>
                <img src="/static/main/images/fart.gif" class="img-responsive" alt="">
                <div class="bht1">
                    <a href="/">Read More</a>
                </div>
            </div>
            <div class="col-md-8 footer-middle wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
                <h4>最新评论</h4>
                <div class="mid-btm" name="latestCommentsEle">

                </div>

            </div>

            <div class="clearfix"></div>
        </div>
    </div>


    <!-- 版权导航框 -->
    <div class="copyright wow fadeInDown" id="copyrightNav">
        <div class="container">
            <p>Copyright &copy; 2017 970655147 All rights reserved.</p>
        </div>
    </div>

</div>

